<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="productRule" :rules="productRule" :model="product" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单编号:" prop="id">
              <el-input v-model="product['id']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="站址编码:" prop="coding">
              <el-input v-model="product['coding']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="塔房标识:" prop="logo">
              <el-select v-model="product['logo']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="资源ID:" prop="resources">
              <el-input v-model="product['resources']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="资源产品类型:" prop="type">
              <el-select v-model="product['type']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                  查询
                </el-button>
                <el-button class="query" @click="reset">
                  重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ query.count }}</span></div>
            <div><span>拦截比率：</span><span>{{ query.rate }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">通过系统调用CRM系统中的销售订单和资源系统进行校验，并实时检查相符情况，解决订单编制、起租时产品配置与对应铁塔、机房资源规格不匹配的问题，避免引发费用争议及事后发现导致一系列变更。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：示例参数：订单号：1116013102940761，订单类型：塔类/微站，站址编码：370202908000000528，产品标识：机房
资源ID：000102050000000002463447，资源类型：一体化机柜</div>
            <!-- 订单编号:1219061907869242，站址编码:370181500000000263，塔房标识:机房，资源ID:000102050000000002475068，资源产品类型:一体化机柜 -->
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            校验结果
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">
              <el-row v-for="(item,index) in dialogData" :key="index">
                <el-col>
                  订单编号: {{ item.requestId }}
                </el-col>
                <el-col>
                  结果: {{ item.message || '无' }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        query:{
           count:0,
           rate:'--'
        },
        product: {
          id: '',
          coding: '',
          logo: '',
          resources: '',
          type: ''
        },
        listLoading: false,
        tableData: [],
        allData: [],
        paginationData: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        options: [{
            value: '塔',
            key: '塔'
          },
          {
            value: '机房',
            key: '机房'
          }
        ],
        typeData: [{
            value: '自建彩钢板机房',
            key: '自建彩钢板机房'
          },
          {
            value: '无机房',
            key: '无机房'
          },
          {
            value: '楼面抱杆',
            key: '楼面抱杆'
          },
          {
            value: '自建框架机房',
            key: '自建框架机房'
          },
          {
            value: '普通地面塔',
            key: '普通地面塔'
          },
          {
            value: '一体化机房',
            key: '一体化机房'
          },
          {
            value: '共享社会机房',
            key: '共享社会机房'
          },
          {
            value: '普通楼面塔',
            key: '普通楼面塔'
          },
          {
            value: '共享社会塔',
            key: '共享社会塔'
          },
          {
            value: '一体化机柜',
            key: '一体化机柜'
          },
          {
            value: '无铁塔',
            key: '无铁塔'
          },
          {
            value: '自建砖混机房',
            key: '自建砖混机房'
          },
          {
            value: '景观塔',
            key: '景观塔'
          },
          {
            value: '简易塔',
            key: '简易塔'
          }
        ],
        dialogData: [],
        productRule: {
          id: [{
            required: true,
            message: '请输入订单编码',
            trigger: 'blur'
          }],
          coding: [{
            required: true,
            message: '请输入站址编码',
            trigger: 'blur'
          }],
          logo: [{
            required: true,
            message: '请选择塔房标识',
            trigger: 'blur'
          }],
          resources: [{
            required: true,
            message: '请输入资源ID',
            trigger: 'blur'
          }],
          type: [{
            required: true,
            message: '请选择资源产品类型',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('1.5');
    },
    mounted() {},
    methods: {
      // 分页跳转
      currentChange(targetPage) {
        this.paginationData['currentPage'] = targetPage
        // table数据接口
        this.getPageData()
      },
      // 分页跳转
      handleSizeChange(size) {
        this.paginationData['pageSize'] = size
        this.paginationData['currentPage'] = 1
        // table数据接口
        this.getPageData()
      },
      getPageData() {
        if (this.paginationData.currentPage * this.paginationData.pageSize <= this.paginationData.total) {
          this.tableData = this.allData.slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.currentPage * this.paginationData.pageSize)
        } else {
          this.tableData = this.allData.slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.total)
        }
      },
      async buttonClick() {
        try {
          this.dialogData = []
          await this.$refs['productRule'].validate()
          const param = [{
                requestId: this.product.id,
                siteId: this.product.coding,
                towerRoomId: this.product.resources,
                crmDescChina: this.product.type,
                flag: this.product.logo
              }]
          
          const r = await this.$http({
            url: this.$http.adornBizUrl('/bindOrder/findByBindOrder'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify(param), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if (r.data.data.length > 0) {
            this.dialogData = r.data.data
            // this.allData = r.data.data
            // this.paginationData['total'] = this.allData.length
            // this.getPageData()
          }
          this.dialogVisible = true
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      reset() {
        this.product = {
          id: '',
          coding: '',
          logo: '',
          resources: '',
          type: ''
        }
        this.dialogData = []
        this.$refs['productRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.query.count=result.cnt||'0';
              this.query.rate=(result.per==null?'--': (result.per*100).toFixed(1)+'%');
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(120px, 60%);
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: rgba(235, 75, 75, 1);
  }
</style>
